<template>
    
    <a class="house" target="_blank" :key="house.hid" :href="baseHouseURI+house.hid">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-591">
                <img class="img-responsive photo" :src="house.photo_src" :title="house.build_name" :alt="house.build_name">
                <div class="tel_num">
                    <span>{{house.tel_num}}通</span>
                </div>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-591">
                <dl class="details">
                    <dt>
                        <span class="build_name">{{house.build_name}}</span>
                        <span class="is_vip" v-if="parseInt(house.is_vip)===1"></span>
                        <span class="build_type">{{house.build_type}}</span>
                    </dt>
                    <dd>
                        <div class="address">{{house.address}}</div>
                        <span :class="{'has-room':house.room}" class="area">{{house.area}}</span>
                        <span class="room">{{house.room}}</span>
                        <div class="price pull-right">
                            <strong>{{house.price}}</strong>
                            <span>{{house.price_unit}}</span>
                        </div>
                        <div class="tags">
                            <span class="tag" v-for="t in house.tag">{{t}}</span>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </a>
</template>

<script>
    import Vue from 'vue'
    import VueRecyclerviewNew from 'vue-recyclerview'

    Vue.use(VueRecyclerviewNew)

    export default{
        name: 'house',
        props: ['house'],
        data(){
            return {
                baseHouseURI: 'https://m.591.com.tw/show/detail/housing/'
            }
        }
    }
</script>

<style scoped>
    .house{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: .2rem .1rem;
    }
    .row{
        margin-right: 0;
        margin-left: 0;
    }
    .house .col-591{
        padding: 0 0.1rem;
        position: relative;
    }
    .tel_num{
        width: 1.16rem;
        height: .34rem;
        line-height: .34rem;
        padding-left: .4rem;
        margin-left: .1rem;
        background: rgba(0,0,0,.6) url(  ) no-repeat .1rem;
        background-size: .22rem .24rem;
        position: absolute;
        left: 0;
        bottom: .1rem;
        color: #fff;
        font-size: .22rem;
    }
    .house:after{
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        border-bottom: 1px solid #eee;
        width: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        z-index: 2;
    }
    .area.has-room:after{
        content: '';
        display: block;
        position: absolute;
        top: 1px;
        right: -5px;
        border-right: 1px solid #888;
        height: 150%;
        transform: scale(0.5);
        transform-origin: 0 0;
        z-index: 2;
    }
    .photo{
        height: 1.71rem;
        width: auto;
    }
    .area, .room{
        position: relative;
        font-size: .26rem;
        margin-right: 0.1rem;
    }
    .price{
        color: rgb(255, 68, 0);
        margin-right: .2rem;
    }
    .price span{
        font-size: .24rem;
    }
    .address{
        font-size: .26rem;
    }
    .details{
        width: 100%;
        height: 100%;
        margin: 0;
        color: #888;
    }
    .build_name{
        color: #282828;
        font-size: .32rem;;
    }
    dt{
        font-weight: normal;
    }
    strong{
        font-size: .32rem;
    }
    .build_type{
        font-size: .26rem;
    }
    .is_vip{
        display: inline-block;
        width: .3rem;
        height: .3rem;
        background-size: cover;
        background-image: url(  );
    }
    .tag{
        background-color: #f2f6fa;
        display: inline-block;
        margin: .1rem 0.1rem 0 0;
        padding: 0.05rem 0.1rem;
        font-size: .2rem;
    }
</style>
